<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="authz" uri="http://www.springframework.org/security/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="o" tagdir="/WEB-INF/tags"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<o:header title="Log In" />
<o:topbar />
<div class="ronan">
<script>
    (function(){
        var picArray=[
            'http://www.cwewater.com/data/admin/single/2019-04-15/5cb3fafece344.jpg',
            'http://www.cwewater.com/data/admin/single/2019-04-15/5cb3fb10731aa.jpg',
            'http://www.cwewater.com/data/admin/single/2019-04-15/5cb3fab228b70.jpg',
            'http://www.cwewater.com/data/admin/single/2019-01-26/5c4c2684c6e6b.jpg'
        ],i=0;
        var ronan = document.querySelector('.ronan');
        var eleImg = document.createElement('img');
        function lunpic(ronan, picArray,eleImg){
            var pic = picArray[i++ % 4];
            eleImg.src = pic;

            eleImg.onload=function(){
                ronan.style.backgroundImage = 'url('+pic+')';
                setTimeout(lunpic,1000 * 3.4, ronan, picArray,eleImg);
            };
        }
        lunpic(ronan, picArray,eleImg);
    })();
</script>
</div>
<div class="container-fluid main">
    <style type="text/css">
        body{    background-color: rgba(0,108,183,.11);}
		.ronan{
            position: fixed;
            top:0;
            left:0;
            z-index: -1;
			width: 100%;
			height: 100vh;
            background-color: aliceblue;
			background:   center no-repeat;
            /* background-size:cover; */
            background-image: url(http://www.cwewater.com/data/admin/single/2019-04-15/5cb3fafece344.jpg);
			box-sizing: border-box;
            transition: all 1.3s ease;
		}
		.ronan-bg{
			position: relative;
			width: 987px !important;
			height: 370px !important;
		}
		.ronan-btn{
			width: 100% !important;
			margin-top: 12px !important;
			padding: 12px !important;
			font-size: 18px !important;
			font-family:'Roboto', sans-serif !important;
			color: #fff;
			text-align: center;
			background: #5BC0DE !important;
		}
		.ronan-btn:hover, .ronan-btn:focus, .ronan-btn:active{
			color: rgba(238, 238, 238, 0.849) !important;
		}
		.ronan-fm{
			background: rgba(255,255,255,.3);
            position: fixed;
            right: 50%;
            top: 50%;
            transform: translate(50%,-50%);
            width: 496px;
            box-sizing: border-box;
            padding: 38px;
			border-radius: 20px;
            box-shadow: 0 1px 3px rgba(0,0,0,.6), 0 2px 4px rgba(0,0,0,.3);
		}
		.ronan-row{
			/* padding: 19px 5px !important; */
			border-width: 0 !important;
			box-shadow: none !important;
            border-radius:8px !important;
            padding:10px !important;
            height: auto !important;
            line-height: 1.66 !important;
		}
		.span6.offset1.well{
			margin: 0 auto;
			float: none;
		}
		.bg-log{
			height: 83px;
			width: 270px;
			background: url(resources/images/Top_BEWGLogo.png) center no-repeat;
		}
        .alert{
            position: fixed;
            top:85px;
            left:0;
            z-index: 2;
            width:100%;
            text-align: center;
        }
        .sv-header{
            position: fixed;top:0;left:0;padding-left:50px;background-color: rgba(255, 255, 255, .4);
            box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.12);
        }
	</style>
	<script>
		$(function(){
			// delete 垃圾
			$('div.navbar.navbar-fixed-top, div#footer').remove();
			$('title').text('统一登录');
		});
	</script>

	<!-- <h2><spring:message code="login.login_with_username_and_password"/></h2> -->

	<c:if test="${ param.error != null }">
		<div class="alert alert-error"><spring:message code="login.error"/></div>
	</c:if>

	<div class="row-fluid sv-header">
		<div class="bg-log">
			<!-- <img src="resources/images/Top_BEWGLogo.png"> -->
		</div>
	</div>
	<div class="row-fluid">
		<div class="span6 offset1 well ronan-bg" style="border-width:0;background:transparent;">
            <form class="ronan-fm well" action="${ config.issuer }${ config.issuer.endsWith('/') ? '' : '/' }login" method="POST">
                <p style="font-size:26px;font-weight:900;color:rgba(255,255,255, .9)">统一登录平台</p>
				<div>
					<div class="input-prepend input-block-level" style="box-sizing: border-box;">
						<!-- <span class="add-on"><i class="icon-user"></i></span> -->
						<input class="ronan-row" style="margin-top:5px;" type="text" placeholder="<spring:message code="login.username"/>" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false" value="<c:out value="${ login_hint }" />" id="j_username" name="username">
					</div>
				</div>
				<div>
					<div class="input-prepend input-block-level" style="box-sizing: border-box;">
						<!-- <span class="add-on"><i class="icon-lock"></i></span> -->
						<input class="ronan-row" style="margin-top:22px;" type="password" placeholder="<spring:message code="login.password"/>" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false" id="j_password" name="password">
                    </div>
                </div>
                <p style="text-align:right;margin:0;"><a href="./updatepwd" style="color:rgba(243, 242, 242, 0.911);text-decoration: none;">重 置 密 码 ？</a></p>
				<div>
					<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
					<!-- <input type="submit" class="btn" value="<spring:message code="login.login-button"/>" name="submit"> -->
					<input type="submit" class="btn ronan-btn" style="border:0;" value="登  录  " name="submit">
				</div>
			</form>
		</div>
	</div>
</div>
